<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
       <el-form-item>
          <el-select v-model="QueryVo.serviceStatusId" clearable placeholder="服务状态" @change="changeStatus"  >
              <el-option v-for="stat in formStatus"
                         :key="stat.status"
                         :label="stat.status"
                         :value="stat.id"  />
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="QueryVo.organizationId" clearable placeholder="服务机构"  @change="getNew(1)">
          <el-option v-for="team in organizationList"
                     :key="team.id"
                     :label="team.title"
                     :value="team.id"/>

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="QueryVo.teamId" clearable placeholder="医生团队"  @change="getNew(2)">
          <el-option v-for="org in curTeam"
                     :key="org.id"
                     :label="org.name"
                     :value="org.id"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="QueryVo.doctorId" clearable placeholder="医生"  @change="getNew(3)">
          <el-option v-for="org in curDoctor"
                     :key="org.id"
                     :label="org.name"
                     :value="org.id"/>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getNull">清空搜索条件</el-button>

<br>


      <el-form-item>
        <el-select v-model="QueryVo.packageId" clearable placeholder="服务包"  @change="changePackage">
          <el-option v-for="label in formPackage"
                     :key="label.id"
                     :label="label.name"
                     :value="label.id"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>




        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="QueryVo.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>


      <el-form-item>
        <el-input v-model="QueryVo.name" placeholder="请输入关键字"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>


    </el-form>

    <!--数据显示列表-->
    <el-table :data="datalist" fit highlight-current-row>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="70"></el-table-column>
      <el-table-column  label="头像" width="80" >
        <template slot-scope="scope">

            <img :src="'http://rj0158yod.hd-bkt.clouddn.com/'+scope.row.image"   width="50px"/>

        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="80" ></el-table-column>
      <el-table-column prop="code" label="身份证号"  width="180"></el-table-column>
      <el-table-column prop="phone" label="手机号码" width="80"></el-table-column>
      <el-table-column prop="packageId" label="服务包" width="100" >
        <template slot-scope="scope">{{getPackage(scope.row.packageId)}}</template>
      </el-table-column>
      <el-table-column prop="itemId" label="服务项目" width="100" >
        <template slot-scope="scope">{{getItem(scope.row.itemId)}}</template>
      </el-table-column>
      <el-table-column prop="doctorId" label="服务医生" width="100" >
        <template slot-scope="scope">{{getDoctor(scope.row.doctorId)}}</template>
      </el-table-column>
      <el-table-column prop="serviceStatusId" label="服务状态" width="100" >
        <template slot-scope="scope">{{getStat(scope.row.serviceStatusId)}}</template>
      </el-table-column>


      <el-table-column prop="appointmentTime" label="申请时间" width="100" ></el-table-column>


      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <router-link :to="'/service/detail/'+scope.row.id">
            <el-button  type="text" size="mini" icon="el-icon-query" >查看详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import item from "../item/item";
import organization from "../../api/admin/organization";

export default {
  data(){
    return{
      QueryVo:{

      },         //查询条件
      currentPage:1,
      pageSize:3,
      datalist: [],
      total:0,
      organizationList:[],        //机构的列表
      teamList:[],                //团队列表
      labelList:[], //标签列表
      formStatus:{},
      formPackage:{},
      form:{},
      formDoctor:[],
      formStatused:[],
      formitem:[],
      curTeam:[],
      curOrganization:[],
      curDoctor:[]
    }
  },
  created() {
    this.getList();

    this.getDoctor();


  },
  methods:{
    getNew(v){
      //选择了新的机构
      if(v==1){
        this.QueryVo.teamId=null;
        this.QueryVo.doctorId=null;
        this.QueryVo.teamIds=[];
        this.QueryVo.doctorIds=[];

        axios.get("http://localhost:8080/team").then(res=>{

          this.teamList=res.data.data;
          let newTeams=[];
          this.teamList.forEach(team=>{
            if(this.QueryVo.organizationId==team.jgId)newTeams.push(team)
          })
          this.curTeam=newTeams;

          this.curTeam.forEach(team=>{
            axios.get("http://localhost:8080/doctor/team/"+team.id).then(r=>{
              r.data.data.forEach(docto=>{
                console.log(docto)
                this.QueryVo.doctorIds.push(docto.id)
              })
            })
          })



        })

        return}
      //选择了新的团队
      if(v==2){
        this.QueryVo.doctorId=null;
        this.QueryVo.doctorIds=[];
        axios.get("http://localhost:8080/doctor").then(res=>{
          this.formDoctor = res.data.data
          let newDoctor=[];
          this.formDoctor.forEach(doctor=>{
            if(this.QueryVo.teamId==doctor.teamId){
              newDoctor.push(doctor);
              this.QueryVo.doctorIds.push(doctor.id)
            }
          })
          this.curDoctor=newDoctor



        })

        return}
      //选择了新的医生
      if(v==3){
        this.QueryVo.doctorIds=[ this.QueryVo.doctorId]
        this.$forceUpdate();
        return
      }
    }

    //分页查所有
    ,getList(flag){
      if (flag==-1){
        this.currentPage=1;
       if(this.QueryVo.time){
         this.QueryVo.startTime=this.QueryVo.time[0]
         this.QueryVo.endTime=this.QueryVo.time[1]
       }
      }




      axios.post("http://localhost:8080/service-record/searchRecord/"+this.currentPage+"/"+this.pageSize,this.QueryVo).then(res=>{
        this.datalist = res.data.data.data
        this.total=res.data.data.total

      })

//查询服务状态
      axios.get("http://localhost:8080/serviceStatus").then(res=>{
        this.formStatus = res.data.data
        this.formStatused = res.data.data
        console.log(res.data.data)

      })

      axios.get("http://localhost:8080/organization").then(res=>{

        this.organizationList=res.data.data;
        console.log(res.data.data,"organizationorganizationorganizationorganizationorganization")
      })

//查询团队
      axios.get("http://localhost:8080/team").then(res=>{

        this.teamList=res.data.data;
        if (!flag)this.curTeam=this.teamList;
        console.log(res.data.data,"team")
      })


      axios.get('http://localhost:8080/item').then(r=>{
        /*record.itemName=r.data.data.data[0].name;*/
        this.formitem = r.data.data
      })


      axios.get("http://localhost:8080/package").then(res=>{
        this.formPackage = res.data.data
      })

      axios.get("http://localhost:8080/doctor").then(res=>{
        this.formDoctor = res.data.data
        if (!flag)this.curDoctor=this.formDoctor;

        console.log(res.data.data,"doctordoctordoctordoctor")

      })



    },




    //改变每页记录数
    handleSizeChange(page){
      this.pageSize=page;
      this.getList(1);
    },
    //改变当前页
    handleCurrentChange(current){
      console.log(current)
      this.currentPage=current;
      this.getList(1);
    },




    //选则组织时
    changeOrganization(id){
     this.QueryVo.organizationId=id;
     //触发分页条件
     this.getList(-1);
    },
    //选则团队时
    changeTeam(id){
      this.QueryVo.teamId=id;
      this.getList(-1);
    },
    changeStatus(id){
      this.QueryVo.serviceStatusId = id
      this.getList(-1);
    },
    changePackage(id){
      this.QueryVo.packageId = id
      this.getList(-1);
    },
    getPackage(id){
      let name=''
      this.formPackage.forEach(p=>{
        if(p.id==id)name=p.name;
      })
      return name;
    },
     getDoctor(id){
      let name=''
      this.formDoctor.forEach(doc=>{
        if (doc.id == id)name = doc.name;
      })
      return name;
    },
      getStat(id){
        let name=''
        this.formStatused.forEach(stat=>{
          if (stat.id == id)name = stat.status;
        })
        return name;
      },
    getItem(id){
      let name=''
      this.formitem.forEach(im=>{
        if (im.id == id)name = im.name;
      })
      return name;
    },
    getNull(){
      this.QueryVo={}
      this.getList(-1)
    },
    handleAvatarSuccess(res, file) {
      this.doctor.image ="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpeg'|| file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<style scoped>

</style>
